<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json的使用</title>
</head>
<script type="application/javascript" src="../js/jquery-1.12.4.js"></script>
<script type="application/javascript">
    $(document).ready(function () {
        //1.定义json对象,在objectDiv中输出
        var user = {"id":1,"name":"张三","pwd":123};
        $("#objectDiv").append("ID:"+user.id+"<br>")
                        .append("用户名"+user.name+"<br>")
                        .append("密码"+user.pwd+"<br>");
        //2.定义JSON格式的字符串数组,在select和ul中显示
        var  ary = ["中","美","俄"];
        var  $ary = $(ary);
       var  $sel = $("#arraySel");
       var  $ul = $("#arrayUl");
        $ary.each(function () {
            $sel.append("<option>"+this+"</option>");//this代表数组中的每一条数据
        });
        $ary.each(function () {
            $ul.append("<li>"+this+"</li>");//this代表数组中的每一条数据
        });
        //3.定义JSON格式的user对象数组,在表格中输出
        var userArrar = [{"id":1,"name":"zhangsan","pwd":123456},
            {"id":2,"name":"lisi","pwd":123456},
            {"id":3,"name":"wangwu","pwd":123456}];
        var $table = $("<table border='1'></table>").append("<tr><td>ID</td><td>用户名</td><td>密码</td></tr>");
        $(userArrar).each(function () {
            $table.append("<tr><td>"+this.id+"</td><td>"+this.name+"</td><td>"+this.pwd+"</td></tr>");
        })//到这里的时候相当于上面的表格中已经有了三条数据

        $("#objectArrayDiv").append($table);
    });
</script>
<body>
    一 JSON格式的user对象:
    <div id="objectDiv"></div><br>
    二 JSON格式的字符串数组: &nbsp;&nbsp;
    <select  id="arraySelect"></select>
    <ul id="arrayUl"></ul>
    三 JSON格式的user对象数组:
    <div id="objectArrayDiv"></div>
</body>
</html>